<figure class="image">
  <img style="aspect-ratio:601/216;" src="Render Note_image.png" width="601"
  height="216">
</figure>
<p>Render Note is used in&nbsp;<a class="reference-link" href="#root/_help_CdNpE2pqjmI6">Scripting</a>.
  It works by displaying the HTML of a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note,
  via an attribute.</p>
<h2>Creating a render note</h2>
<ol>
  <li>Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
    with the HTML language, with what needs to be displayed (for example <code>&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
  <li>Create a&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
  <li>Assign the <code>renderNote</code>  <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
    point at the previously created code note.</li>
</ol>
<h2>Dynamic content</h2>
<p>A static HTML is generally not enough for&nbsp;<a class="reference-link"
  href="#root/_help_CdNpE2pqjmI6">Scripting</a>. The next step is to automatically
  change parts of the note using JavaScript.</p>
<p>For a simple example, we are going to create a render note that displays
  the current date in a field.</p>
<p>To do so, first create an HTML code note with the following content:</p><pre><code class="language-text-x-trilium-auto">&lt;h1&gt;Current date &amp; time&lt;/h1&gt;
The current date &amp; time is &lt;span class="date"&gt;&lt;/span&gt;</code></pre>
<p>Now we need to add the script. Create another&nbsp;<a class="reference-link"
  href="#root/_help_6f9hih2hXXZk">Code</a>, but this time of JavaScript (frontend)
  language. Make sure the newly created note is a direct child of the HTML
  note created previously; with the following content:</p><pre><code class="language-text-x-trilium-auto">const $dateEl = api.$container.find(".date");
$dateEl.text(new Date());</code></pre>
<p>Now create a render note at any place and set its <code>~renderNote</code> relation
  to point to the HTML note. When the render note is accessed it will display:</p>
<blockquote>
  <p><strong>Current date &amp; time</strong>
    <br>The current date &amp; time is Sun Apr 06 2025 15:26:29 GMT+0300 (Eastern
    European Summer Time)</p>
</blockquote>
<h2>Examples</h2>
<ul>
  <li><a class="reference-link" href="#root/_help_R7abl2fc6Mxi">Weight Tracker</a>&nbsp;which
    is present in the&nbsp;<a class="reference-link" href="#root/_help_6tZeKvSHEUiB">Demo Notes</a>.</li>
</ul>